import Vue from 'vue'

const component = {
    template: `
        <div>
            <input type='text' v-model.number="text">
            <span>{{propOne}}</span>

        </div>
    `,
    mounted() {
        console.log('inner mounted')
    },
    data() {
        return {
            text: 0
        }
    },
    props: {
        active: Boolean,
        propOne: String
    }

}

const parent = new Vue({
    name: 'parent'
})

const component2 = {

    extends: component,

    mounted() {
        console.log('component2', this.$parent.$options.name)
        this.$parent.text = '123123123'
    },
    data() {
        return {
            text: 2
        }
    }
}
// const CompVue = Vue.extend(component)

// new CompVue({
//     propsData: {
//         propOne: 'hello world'
//     },
//     mounted() {
//         console.log('outter mounted')
//     },
//     el: '#app'
// })

new Vue({
    parent: parent, //这个属性只能在new Vue方法用作用
    el: '#app',
    name: 'comp3',
    components: {
        component2
    },

    data() {
        return {
            text: '123'
        }
    },
    mounted() {
        console.log('component3', this.$parent.$options.name)
    },
    template: "<div><component2></component2><span>{{text}}</span></div>"
})
